03. Common React Native Components

Common React Native Components

When writing HTML, we're used to using <div> and <span> tags to define sections or to contain other elements on the page. In React Native, a similar principle applies, but this time we're using React Native's <View> component to build the application UI. Just like HTML's <div>, <View> components can accommodate several props (e.g. style), and can even be nested inside other <View> components!

<Text> works just how you'd expect, as well. Its main objective is to, by no surprise, render text in the application. Just like <View>, styling and nesting capabilities apply to <Text> components, as well.

Let's see how they work!

In-Class Project Overview

Icons

Right out of the box, Create React Native App offers support for thousands of vector icons to use in your applications. Feel free to bookmark and check out Expo's vector icon directory for a complete list. Whichever icon set you choose, just be sure that it fits the overall look and feel of your application (e.g., using platform-specific icons).

Here's the commit with the changes made in the previous two videos.

⚠️ Icons not Rendering? ⚠️

In the commit above, the color property of the MaterialIcons component is set to white. This will make it seem as if no icons are appearing, since the background color is also white. Feel free to switch this value to black (as the above video demonstrates).

Here's the commit with the changes made in this video.

Here's the commit with the changes made in this video.

Here's the commit with the changes made in this video.

Touchables

Users mainly interact with web apps with clicks. In the world of mobile apps, however, several different touch gestures are used to navigate through the app: tapping a button, swiping to scroll through a list, and so on.

React Native offers a number of components to handle "tapping gestures," or what is called Touchables. Let's take a look at them in detail in the following video:

• Button
• TouchableHighlight
• TouchableOpacity
• TouchableNativeFeedback
• TouchableWithoutFeedback

Here's the commit with the changes made in this video.

Here's the commit with the changes made in this video.

Here's the commit with the changes made in this video.

Here's the commit with the changes made in this video.

💡 Pause Udacifitness💡

At this point, let's put the UdaciFitness project on hold for a bit and talk about some other common React Native components.
For example, how would you handle lists in a mobile app? What about forms, or images?

Though these are not necessarily used in the in-class project, these components are still great to know as you develop React Native applications.

Lists

React Native comes with a few ways to render lists. You'll probably run into ScrollView and FlatList components most commonly, so let's take a look at both of these in detail!

💡 Seeing Errors with ScrollView? 💡

If you're running into errors mentioning that ScrollView has no propType…, we recommend reinstalling Create React Native App globally, as well as updating the Expo mobile application. If you still find issues, feel free to check out this GitHub issue on the official React Native repo.

💡 SectionList 💡

What if you wanted to add section headers to a list? FlatList doesn’t quite support these, but React Native offers another list component that renders these headers nicely. Feel free to check out SectionList in the React Native documentation for a closer look

QUIZ QUESTION::

Match each list type with their role:

ANSWER CHOICES:

Forms

Forms in React Native are just like the forms in React that you already know: the state of input form elements is controlled by the React component that renders that form. That is, form values are held in local component state, making state the "source of truth" for that form.

React Native provides a few basic components to use in your application's forms. We'll take a look at each of these more closely in the following video:

• TextInput
• KeyboardAvoidingView
• Slider
• Switch

⚠️ Oops! (onChange vs. onChangeText) ⚠️

In the above video, App renders a TextInput component with an onChange prop. With the way that the event handler, handleTextChange(), is implemented, the prop should be onChangeText.

While both methods are invoked on value change, onChangeText passes the actual value (text) as the argument. On the other hand, onChange passes the entire event object as an argument. Both are perfectly valid props, but the logic of your event handler will need to be tailored to the prop chosen. For more info, check out this post on Stack Overflow.

Other Components

We've just seen some of the most important components built into React Native. These components will get you started with the essential functionalities in the apps that you build -- but the list of available components goes on! Feel free to review the React Native documentation for a complete list. For starters, we recommend checking out:

• ActivityIndicator
• Picker
• WebView
• Modal

Note that certain components are also platform-specific! Though you want to build cross-platform components with composition, reusing as much code as possible, it may make sense for certain elements to be different depending on your audience (i.e., iOS vs. Android).

Summary

React Native provides a variety of built-in components for developing mobile applications. While some support basic functionality in an application (e.g., text, images, lists), others offer more specialized functionality (e.g., pulling to refresh, displaying a loading indicator). Feel free to check out Components and APIs in the React Native documentation for an exhaustive list.